<template>
  <view class="container">
    <!-- 日期选择栏 -->
    <view class="header">
          <picker 
            mode="date" 
            :value="selectedDate" 
            :start="startDate" 
            :end="endDate"
            @change="handleDateChange"
            class="date-picker"
          >
            <view class="picker-content">
              选择日期：{{ selectedDate }}
              <uni-icons type="calendar" size="24" color="#666"></uni-icons>
            </view>
          </picker>
    
          <view class="toggle-group">
            <text 
              class="toggle-btn" 
              :class="{active: isToday}"
              @click="switchDate('today')"
            >今日</text>
            <text 
              class="toggle-btn" 
              :class="{active: !isToday}"
              @click="switchDate('yesterday')"
            >昨日</text>
          </view>
        </view>

    <!-- 数据概览 -->
    <view class="stats-row">
      <view class="stat-card gradient-blue">
        <text class="stat-label">总收入</text>
        <text class="stat-value">¥{{ totalIncome }}</text>
      </view>
      <view class="stat-card gradient-purple">
        <text class="stat-label">总订单</text>
        <text class="stat-value">{{ totalOrders }}</text>
      </view>
    </view>

    <!-- 收入分布饼图 -->
    <view class="chart-container">
      <LEchart class="echart" ref="pieChart"></LEchart>
    </view>

    <!-- 订单量柱状图 -->
    <view class="chart-container">
      <LEchart class="echart" ref="barChart"></LEchart>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted,computed } from 'vue'
import LEchart from '@/components/l-echart/l-echart.vue'
const echarts = require('../../static/echarts.min')


// 日期处理函数
const formatDate = (date) => {
  const d = new Date(date)
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}
// 响应式数据
const isToday = ref(true)
const selectedDate = ref(formatDate(new Date()))
const totalIncome = ref(85600)
const totalOrders = ref(234)

// 日期范围计算[6,7](@ref)
const startDate = computed(() => {
  const d = new Date()
  d.setDate(d.getDate() - 90)
  return formatDate(d)
})

const endDate = computed(() => formatDate(new Date()))

// 日期变更处理[6](@ref)
const handleDateChange = (e) => {
  selectedDate.value = e.detail.value
}

// 切换今日/昨日
const switchDate = (type) => {
  const current = new Date()
  if (type === 'yesterday') {
    current.setDate(current.getDate() - 1)
    isToday.value = false
  } else {
    isToday.value = true
  }
  selectedDate.value = formatDate(current)
}



const showDatePicker = ref(false);



// 图表引用
const pieChart = ref()
const barChart = ref()

const openDatePicker = () => {
  showDatePicker.value = true;
};

const handleDateConfirm = (e) => {
  selectedDate.value = e.fullDate;
  showDatePicker.value = false;
};



// 图表配置
const chartOptions = reactive({
  pie: {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: ¥{c} ({d}%)'
    },
    legend: {
      bottom: 0,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#666'
      }
    },
    series: [{
      text: '收入分布',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 4,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: true,
        formatter: '{d}%'
      },
      data: [
        { value: 53400, name: '保养', itemStyle: { color: '#6a8cff' } },
        { value: 32200, name: '洗车', itemStyle: { color: '#32c5e3' } }
      ]
    }]
  },
  bar: {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '12%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['维修', '保养', '洗车'],
      axisLine: {
        lineStyle: {
          color: '#e4e6eb'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    series: [{
      name: '订单量',
      type: 'bar',
      barWidth: '40%',
      itemStyle: {
        borderRadius: [4, 4, 0, 0],
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#6a8cff' },
          { offset: 1, color: '#32c5e3' }
        ])
      },
      data: [85, 120, 78]
    }]
  }
})



// 初始化图表
onMounted(() => {
  pieChart.value.init(echarts, chart => {
    chart.setOption(chartOptions.pie)
  })
  
  barChart.value.init(echarts, chart => {
    chart.setOption(chartOptions.bar)
  })
})
</script>

<style lang="scss" scoped>
.container {
  padding: 24rpx;
  background: #f5f7fa;
}
.date-picker {
  background: #fff;
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
  
  .picker-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 24rpx;

  .date-picker {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 16rpx 24rpx;
    border-radius: 12rpx;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);
    
    .date-text {
      margin-right: 12rpx;
      color: #333;
      font-weight: 500;
    }
  }

  .toggle-group {
    background: #f0f2f5;
    border-radius: 12rpx;
    overflow: hidden;

    .toggle-btn {
      display: inline-block;
      padding: 16rpx 32rpx;
      color: #666;
      font-size: 28rpx;
      transition: all 0.3s;

      &.active {
        background: linear-gradient(135deg, #6a8cff, #32c5e3);
        color: #fff;
        border-radius: 8rpx;
      }
    }
  }
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx;
  margin-bottom: 32rpx;

  .stat-card {
    padding: 32rpx;
    border-radius: 16rpx;
    color: #fff;
    box-shadow: 0 6rpx 18rpx rgba(106,140,255,0.15);

    .stat-label {
      display: block;
      font-size: 28rpx;
      margin-bottom: 12rpx;
      opacity: 0.9;
    }

    .stat-value {
      display: block;
      font-size: 40rpx;
      font-weight: 600;
    }

    &.gradient-blue {
      background: linear-gradient(135deg, #6a8cff, #32c5e3);
    }

    &.gradient-purple {
      background: linear-gradient(135deg, #b06cff, #e36be3);
    }
  }
}

.chart-container {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.04);

  .echart {
    width: 100%;
    height: 480rpx;
  }
}

</style>